<template>
	<view>
		<view class="top">
			<map id="my_test_map" style="width: 750rpx; height: 540upx;" :include-points='get_address'
				@markertap="check_market" :circles="circles" :scale="scale" @regionchange="regionchange"
				:markers='markers' :latitude="center_lat" :longitude="center_lng">
			</map>
			<button @click="change_markers">变更</button>
		</view>
		<view class="font" v-for=" item in commodity">
			<text>订单编号</text>
			<view class="img">
				<img class="location" src="/static/img/location.png">
				<text class="content-text-location-font">&nbsp; {{item.address}}</text>
			</view>
			<view>
				<view class="font">
					<text>联系方式:&nbsp; {{item.contactsName}}&nbsp;&nbsp; {{item.phone}}</text>
				</view>
			</view>
			<view>
				<view class="font">
					<text>商品编号:{{item.number}}</text>
				</view>
			</view>
			<view>
				<view class="font">
					<text>商品名称:&nbsp; {{item.commodity.commodityName}}</text>
				</view>
			</view>
			<view>
				<view class="font">
					<text>规格:&nbsp; {{item.commodity.commodityType}}</text>
				</view>
			</view>
			<view>
				<view class="font">
					<text>数量:&nbsp; {{item.quantity}}</text>
				</view>
			</view>

		</view>
		<view v-for=" item in commodity">
			<view>
				<view class="uni-box1">
					<navigator @click="hphone(item.phone)">
						<view class="mileage">
							<img class="phone" src="/static/img/phone.png">
						</view>
					</navigator>
					<view class="line">

					</view>
					<view class="tolai">
						<img class="chat" src="/static/img/chat.png">
					</view>
				</view>
				<navigator @click="orderState(item.coId ,item.coType)">
					<view class="uni-box2">
						<!-- <text class="state" v-if="item.coType==1">立即接单</text> -->
						<text class="state" v-if="item.coType===2">待取货</text>
						<text class="state" v-if="item.coType===3">取货完成</text>
						<text class="state" v-if="item.coType===4">已送达</text>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commodity: {},
				nums: '',

				d: '',
				h: '',
				m: '',
				n: '',
				resultRoId: {},
				id: 'ybus_map',
				center_lat: 40.238544,
				center_lng: 116.133069,
				markers: [{
					id: 'begin',
					latitude: 40.238544,
					longitude: 116.133069,
					iconPath: "../",
					width: 50,
					height: 50
				}],
				scale: 15,
				get_address: [],
				circles: [{ //在地图上显示圆
					latitude: 34.252109,
					longitude: 108.840866,
					fillColor: "#e6060a6A", //填充颜色
					color: "#e6060a6A", //描边的颜色
					radius: 300, //半径
					strokeWidth: 2 //描边的宽度
				}]

			}

		},
		onLoad(options) {
			console.log(options)
			this.loadData()
			// this.loadDataRedis()
		},
		methods: {
			hphone(phone) {
				console.log(phone)
				uni.makePhoneCall({
					phoneNumber: phone,
					success: (res) => {
						console.log('调用成功')
					},
					fail: (res) => {
						console.log(res);
					}
				});
				plus.device.dial(phoneNumber, true)
			},
			orderState(coId, coType) {
				console.log(coId)
				console.log(coType)
				uni.request({
					url: 'http://localhost:9525/xkrider/commodityorder/getCommodityorderType',
					method: 'GET',
					data: {
						coId: coId,
						coType: coType
					},
					dataType: 'json',
					success: (res) => {
						// var result = JSON.stringify(res.data.data.message);
						this.commodity = res.data.data.commodity;
						console.log(this.commodity)
						this.loadData()
					},
				})

			},
			loadData() {
				// console.log(this.options.roId)
				uni.request({
					url: 'http://localhost:9525/xkrider/commodityorder/getCommodityorderDetails',
					method: 'GET',
					data: {
						coId: this.options.coId,
						riderId: 3
					},
					dataType: 'json',
					success: (res) => {
						// var result = JSON.stringify(res.data.data.message);
						this.commodity = res.data.data.commodity;
						console.log(this.commodity)

					},
				})
			},
			change_markers() {
				console.log("开始执行地图标注");
				this.center_lat = 34.275092
				this.center_lng = 108.961716
				//生成标记点
				var begin_markers = [{
					id: 123,
					latitude: 34.275093,
					longitude: 108.961716,
					iconPath: '../static/1.png',
					width: 50,
					height: 50,
					// title:'标注点A',
					callout: [{
						content: "tes****123456t",
						color: '#333',
						bgColor: "#fff",
						fontSize: '68',
						padding: '20upx',
						display: 'ALWAYS'
					}]
				}, {
					id: 124,
					latitude: 34.254430,
					longitude: 108.947040,
					iconPath: "../../static//map_getaddress.png",
					width: 50,
					height: 50
				}]
				var now_address = [{
					id: 'begin',
					latitude: 34.252109,
					longitude: 108.840866,
					iconPath: "../../static//map_getaddress.png",
					width: 50,
					height: 50
				}]
				//获取地图
				this.markers = now_address.concat(begin_markers);
				console.log();

				this.circles = [{ //在地图上显示圆
						latitude: 34.254430,
						longitude: 108.947040,
						fillColor: "#9db0de6A", //填充颜色
						color: "#00aaff", //描边的颜色
						radius: 300, //半径
						strokeWidth: 1 //描边的宽度
					},
					{ //在地图上显示圆
						latitude: 34.275093,
						longitude: 108.966816,
						fillColor: "#9db0de6A", //填充颜色
						color: "#00aaff", //描边的颜色
						radius: 300, //半径
						strokeWidth: 1 //描边的宽度
					}
				]
				//缩放视野以包含所有给定的坐标点
				this.get_address = [{
						latitude: 34.254430,
						longitude: 108.947040,
					},
					{
						latitude: 34.275093,
						longitude: 108.966816
					}
				]

				//
				// this.$forceUpdate();
			},
			//拖拽地图
			regionchange(e) {
				console.log(e);

				var _that = this;
				_that.mainmap = uni.createMapContext('my_test_map', this);
				_that.mainmap.getCenterLocation({
					success(res) {
						var lat = res.latitude
						var lng = res.longitude
						console.log(lat);
						console.log(lng);
						//重设标记点
						_that.mainmap.translateMarker({
							markerId: 'begin',
							destination: {
								latitude: lat,
								longitude: lng
							},
							duration: 350,
							animationEnd() {
								console.log('设置');
							}
						})
					}
				})

			},
			//点击标记
			check_market(e) {
				console.log(e.detail);
			}
		}
	}
</script>
export default {
data() {
return {

},
onLoad() {

},
methods: {}
}
</script>

<style>
	page {
		/* background-color: #EBFCF9; */
		font-weight: bold;
	}

	.box {
		/* border: 5px solid #3F536E; */
		float: left;
		width: 100%;
		margin-top: 10rpx;
		margin-left: 20rpx;
	}

	.price {
		float: right;
		margin-top: 20rpx;
		margin-right: 60rpx;
		font-size: 20rpx;
		color: #ED5565;
	}

	.number {
		margin-top: 20rpx;
		margin-left: 10rpx;
		float: left;
	}

	.total {
		font-size: 30rpx;
		margin-top: 30rpx;
		margin-left: 100rpx;
		float: left;
	}

	.total2 {
		font-size: 30rpx;
		margin-top: 30rpx;
		margin-right: 50rpx;
		float: right;
		color: #ED5565;
	}

	.details {
		font-size: 20rpx;
		margin-top: 20rpx;
		margin-left: 100rpx;
		float: left;
	}

	.details {
		margin-left: 80rpx;
	}

	.djs {
		float: right;
		margin-right: 220rpx;
	}

	.state {
		padding: 50rpx;
		font-size: 34rpx;
		color: #FFFFFF;
	}

	.uni-box2 {
		width: 360rpx;
		height: 130rpx;
		/* border-radius: 7px; */
		/* border: 1px solid #3F536E; */
		padding: 10px;
		/* margin-left: 25px; */
		/* box-shadow: darkgrey 3px 3px 3px 3px; */
		/* // position: absolute;
		// left: 25rpx; */
		/* background-color: #FFFFFF; */
		/* float: left; */
		margin-top: 20px;
		float: right;
		display: flex;
		justify-content: center;
		background-color: #2ABA66;
	}

	.line {
		width: 0rpx;
		height: 50rpx;
		border: 1px solid #E4E4E4;
		float: left;
		margin-left: 65rpx;
		margin-top: 50rpx;
	}

	.chat {
		width: 50rpx;
		height: 50rpx;
		margin-top: 50rpx;
		margin-left: 50rpx;
		float: left;
	}

	.phone {
		width: 50rpx;
		height: 50rpx;
		margin-top: 50rpx;
		margin-left: 40rpx;
		float: left;
	}

	.uni-box1 {
		width: 300rpx;
		height: 130rpx;
		/* border-radius: 7px; */
		/* border: 1px solid #3F536E; */
		padding: 10px;
		float: left;
		margin-top: 20px;
	}

	.font {
		margin-top: 30rpx;
		margin-left: 60rpx;
		font-size: 25rpx;
	}

	.img {
		margin-top: 30rpx;
	}

	.location {
		width: 45rpx;
		height: 45rpx;
		// margin-top: 15rpx;
		margin-left: 15rpx;
		float: left;
		;
	}

	.time {
		width: 43rpx;
		height: 43rpx;
		// margin-top: 15rpx;
		margin-left: 15rpx;
		float: left;
	}
</style>
